<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="" method="post">
        用户名：<input type="text" name="" id="username">
        手机号：<input type="text" id="phone">
        密码：<input type="password" name="" id="password">
        <span id="code"></span>
        <button id="btn">验证</button>
    </form>
</body>

</html>
<script>
    var reg1 = /^[a-zA-Z]{14}$/ | /^[a-z]{14}$/i //14个字母 
    var reg2 = /^1[356789]\d{9}$/ //11位数字 只能以1开头 第二位数 3 5 6 7 8 9
    var reg3 = /^[0-9a-zA-Z,\.;'']{8，14}$/ //8-14个字符 数字 字母 标点标点符号 组成
    //中文
    var username = document.querySelector('#username');
    var btn = document.querySelector('#btn');
    btn.onclick = function () {
        // 最多只能有7个汉字 或者 14个英文字母
        // var reg = /^[a-z\u4e00-\u9fa5]{2,14}$/i;
        // var reg = /^([a-z]{2,14}|[a-z][\u4e00-\u9fa5]{1,7})$/
        // var reg = /([a-z][a-z]|\u4e00-\u9fa5){1,7}/

        // replace() 替换 一个中文表示两个字符
        var reg = /^[a-z\u4e00-\u9fa5]{2,14}$/i;
        // 验证 用户名是否是 英文或者 汉字组成
        var res = reg.test(username.value);
        if (res) {
            // 判断 用户名长度 把是中文的用两个英文替换
            var len = username.value.replace(/[\u4e00-\u9fa5]/g, 'zz');
            // 在判断 字符串的长度 是否大于14，如果大于14 用户名长度 验证失败
            if (len.length > 14) {
                alert('用户名长度只能为7个汉字或者14个英文')
            } else {
                alert('验证成功')
            }
        } else {
            alert('验证失败')
        }

    }
</script>